display
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2 |
|
Значення
за умовчанням |
inline |
|
Наслідує |
Ні |
|
Застосовується |
До усіх
елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/visuren.html#display - prop |
Опис
Багатоцільова
властивість, яка визначає, як елемент має бути показаний в документі.
Синтаксис
display:
block | inline | inline - table | list - item | none | run - in | table | table
- caption | table - cell | table - column - group | table - footer - group |
table - header - group | table - row | table - row - group
Значення
Список
можливих значень цієї властивості, що розуміється різними браузерами дуже
короткий, - block, inline, list - item і none. Усі інші допустимі значення
підтримуються браузерами вибірково. У таблиці. 1 приведені деякі популярні
браузери і їх підтримка різних значень.
|
Таблиця. 1. Підтримка браузерами значень display |
|||||||||
|
Значення |
Опис |
IE6 |
IE7 |
IE8 |
Op 8 |
Op 9.2 |
Ff 1.5 |
Ff 2 |
Ff 3 |
|
block |
Елемент
показується як блоковий. Застосування цього значення для вбудованих
елементів, наприклад тега <SPAN>, примушує його звістки подібно до
блоків - відбувається перенесення рядків на початку і у кінці вмісту. |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
|
inline |
Елемент
відображається як вбудований. Використання блокових тегів, таких як
<DIV> і <P>, автоматично створює перенесення і показує вміст цих
тегів з нового рядка. Значення inline відміняє цю особливість, тому вміст
блокових елементів починається з того місця, де закінчився попередній
елемент. |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
|
inline -
block |
Це
значення генерує блоковий елемент, який обтекается іншими елементами
веб-сторінки подібно до вбудованого елементу. Фактично такий елемент по своїй
дії схожий на вбудовувані елементи (на зразок тега <IMG>). При цьому
його внутрішня частина форматується як блоковий елемент, а сам елемент - як
вбудований. |
Так |
Так |
Так |
Так |
Так |
Ні |
Ні |
Так |
|
inline -
table |
Визначає,
що елемент є таблицею як при використанні тега <TABLE>, але при цьому
таблиця є вбудованим елементом і відбувається її обтікання іншими елементами,
наприклад, текстом. |
Ні |
Ні |
? |
Так |
Так |
Ні |
Ні |
Так |
|
list -
item |
Елемент
виводиться як блоковий і додається маркер списку. |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
|
none |
Тимчасово
видаляє елемент з документу. Займане ним місце не резервується і веб-сторінка
формується так, немов елементу і не було. Змінити значення і зробити знову
видимим елемент можна за допомогою скриптів, звертаючись до властивостей
через об'єктну модель. В цьому випадку відбувається переформатування даних на
сторінці з урахуванням знову доданого елементу. |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
|
run - in |
Встановлює
елемент як блоковий або вбудований залежно від контексту. |
Ні |
Ні |
Так |
Так |
Так |
Ні |
Ні |
Ні |
|
table |
Визначає,
що елемент є блоковою таблицею подібно до використання тега <TABLE>. |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
caption |
Задає
заголовок таблиці подібно до застосування тега <CAPTION>. |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
cell |
Вказує, що
елемент є елементом таблиці (тег <TD> чи <TH>). |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
column |
Призначає
елемент колонкою таблиці, немов був доданий тег <COL>. |
Ні |
Ні |
? |
Ні |
Так |
Так |
Так |
Так |
|
table -
column - group |
Визначає,
що елемент є групою однією або більше за колонки таблиці, як при використанні
тега <COLGROUP>. |
Ні |
Ні |
? |
Ні |
Так |
Так |
Так |
Так |
|
table -
footer - group |
Використовується
для зберігання однієї або декількох рядків осередків, які відображаються в
самому низу таблиці. По своїй дії схоже з роботою тега <TFOOT>. |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
header - group |
Елемент
призначений для зберігання однієї або декількох рядків осередків, які
представлені вверху таблиці. По своїй дії схоже з роботою тега <THEAD>.
|
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
row |
Елемент
відображається як рядок таблиці (тег <TR>). |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
|
table -
row - group |
Створює
структурний блок, що складається з декількох рядків таблиці аналогічно дії
тега <TBODY>. |
Ні |
Ні |
? |
Так |
Так |
Так |
Так |
Так |
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>display</title>
<style type="text/css">
. .example {
border: dashed 1px #634f36; /* Параметрів
рамки */
background: #fffff5; /* Колір фону */
font - family: "Courier New",
Courier, monospace; /* Шрифт тексту */
padding: 7px; /* Полів навколо тексту */
margin: 0 0 1em; /* Відступів навколо */
}
. .exampleTitle {
border: 1px solid black; /* Параметрів
рамки */
border - bottom: none; /* Прибираємо лінію
знизу */
padding: 3px; /* Полів навколо тексту */
display: inline; /* Встановлюємо як
вбудований елемент */
background: #efecdf; /* Колір фону */
font - weight: bold; /* Жирне зображення */
font - size: 90%; /* Розмір тексту */
margin: 0; /* Прибираємо відступи навколо
*/
white - space: nowrap; /* Відміняємо
перенесення тексту */
}
</style>
</head>
<body>
<p
class="exampleTitle">Приклад</p>
<p class="example">
& <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"><br>
& <html><br>
& <body><br>
& <b>Формула сірчаної кислоти
:</b>
&
<i>H<sub><small>2</small></sub>
SO<sub><small>4</small>
&
</sub></i><br>
& </body><br>
& </html>
</p>
</body>
</html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1.
Застосування властивості display
Об'єктна модель
[window.]document.getElementById("elementID").style.display
Браузери
Internet
Explorer до версії 7 включно:
Opera 9.2 і
старше, а також Firefox версії 2.0 і старше: